import React from 'react'
import Taro from '@tarojs/taro'
import './index.less'
import http from '../../../../utils/http'

import { View } from "@tarojs/components";
import { AtAccordion, AtList, AtListItem } from 'taro-ui'



class Directory extends React.Component {

  constructor() {
    super(...arguments)
    this.state = {
      open: false,
      outlineCourseData: [],
    }
  }

  /* 获取课程大纲信息 */
  getCourse = async () => {
    let outlineCourse = []
    const { id } = Taro.getCurrentInstance().router.params
    const { data: res } = await http({
      url: '/implement/getOutline',
      data: { project_id: id }
    })
    if (res.error !== 0) return
    outlineCourse = res.data
    for (let v of outlineCourse) {
      const { data: res2 } = await http({
        url: '/implement/getOutlineCourse',
        data: { outline_id: v.id }
      })
      v.children = res2.data
    }
    this.setState({ outlineCourseData: outlineCourse })
  }

  handleClick = (id) => {
    if (id === this.state.open) {
      this.setState({
        open: 1234567890
      })
    } else {
      this.setState({
        open: id
      })
    }
  }
  /* 选择课程视频传给父组件视频信息 */
  coureChange = (videoUrl, imgUrl, title) => {
    this.props.videoUrl(videoUrl, imgUrl, title)
  }
  /* 渲染大纲以及课程 */
  renderOutLineCourse = (arr) => {
    return arr.map((v) => {
      if (v.children) {
        return (
          <AtAccordion
            open={this.state.open === v.id ? true : false}
            onClick={() => this.handleClick(v.id)}
            title={v.title}
            key={v.id}
            isAnimation={false}
          >
            {this.renderOutLineCourse(v.children)}
          </AtAccordion>
        )
      } else {
        return (
          <AtList hasBorder={false} key={v.id}>
            <AtListItem
              title={v.title}
              arrow='right'
              thumb={v.course_img_url}
              onClick={() => this.coureChange(
                v.course_video_url,
                v.course_img_url,
                v.title
              )}
            />
          </AtList>
        )
      }
    })
  }

  /* 挂载时 */
  componentDidMount() {
    /* 获取课程大纲信息 */
    this.getCourse()
  }

  render() {
    return (
      <View className='directory_box'>
        {this.renderOutLineCourse(this.state.outlineCourseData)}
      </View >
    )
  }
}

export default Directory